import { View, Text } from '@tarojs/components';
import * as Taro from '@tarojs/taro';
import { PAGE_ROUTES } from '../../constants';
import Card from '../card';
import './index.less';

const Navigation: React.FC = () => {
  const handleNavigate = (path: string) => {
    // 使用 Taro 导航 API 跳转页面
    Taro.navigateTo({
      url: path,
      fail: () => {
        // 如果页面不存在，显示提示
        Taro.showToast({
          title: '页面暂未开发',
          icon: 'none'
        });
      }
    });
  };

  return (
    <View className='navigation-container'>
      {/* 导航菜单 */}
      <View className='navigation-header'>
        <View className='navigation-content'>
          <Text className='navigation-title'>DSHX - 页面导航</Text>
          <Text className='navigation-subtitle'>点击下方链接跳转到对应页面</Text>

          <View className='navigation-grid'>
            {PAGE_ROUTES.map((route) => (
              <View
                key={route.path}
                className='navigation-item'
                onClick={() => handleNavigate(route.path)}
              >
                <View className='navigation-item-content'>
                  <Text className='navigation-item-title'>
                    {route.name.split(' / ')[0]}
                  </Text>
                  <Text className='navigation-item-subtitle'>
                    {route.name.split(' / ')[1]}
                  </Text>
                </View>
              </View>
            ))}
          </View>

          <Card className='navigation-info' padding='md' shadow='sm' rounded='lg'>
            <Text className='info-title'>项目信息</Text>
            <View className='info-content'>
              <Text className='info-item'>• 总页面数: {PAGE_ROUTES.length} 个页面</Text>
              <Text className='info-item'>• 技术栈: Taro v4 + React 18 + TypeScript + Less</Text>
              <Text className='info-item'>• 多端支持: 微信小程序、H5、APP</Text>
              <Text className='info-item'>• 功能完整: 所有原始功能都已实现</Text>
              <Text className='info-item'>• 主题色: #22c55e (绿色系)</Text>
            </View>
          </Card>
        </View>
      </View>
    </View>
  );
};

export default Navigation;
